import React, {Component} from 'react';
import './CommentBox.css';
import { Button } from 'element-react'

class CommentBox extends Component{
    constructor (props) {
        super(props);
        this.state = {
            value: ''
        }
    }
    handleChange (evt) {
        this.setState({
            value: evt.target.value
        })
    }
    handleSubmit(evt) {
        this.props.onAddComment(this.state.value)
        this.setState({
            value: ''
        });
        evt.preventDefault()    // 取消默认行为
    }
    render () {
        return (
            <div className="box">
                <div>
                    <p className='comment-title'>留言内容</p>
                    <textarea
                               className='comment-input'
                               placeholder=''
                               onChange={this.handleChange.bind(this)}
                               value={this.state.value}/>
                </div>
                <Button type='primary' onClick={this.handleSubmit.bind(this)}>留言</Button>
            </div>
        )
    }
}

export default CommentBox
